<template>
  <div>
    <!-- <img :src="avatarImg" @click="openAvatarSelect()" title="点击上传头像" class="img-circle img-lg" /> -->
    <div class="lam-upload-preview" @click="openAvatarSelect">
      <div class="mask"><i class="el-icon-plus"></i></div>
      <img :src="avatarImg" />
    </div>
    <AvatarSelectDialog ref="avatarSelect" @ok="avatarSelectOk"/>
  </div>
</template>

<script>
  import { mapActions,mapGetters } from 'vuex'
  import AvatarSelectDialog from './AvatarSelectDialog'
  import {httpPost} from '@/api';

  export default {
    components: {
      AvatarSelectDialog
    },
    data() {
      return {
        url:{
          updateAvatar:'/sys/userInfo/updateAvatar',
        },
      };
    },
    computed:{
      avatarImg(){
        return this.avatar();
      }
    },
    methods: {
      ...mapGetters(['avatar']),
      ...mapActions(['UpdateAvatar']),
      avatarSelectOk(data){
        if(data){
          httpPost(this.url.updateAvatar, {avatarBase64:data}).then(res=>{
            if (res.success) {
              this.UpdateAvatar(res.data)
              this.msgSuccess("上传成功！");
            }
          })
        }
      },
      openAvatarSelect(){
        this.$refs.avatarSelect.show({
          img: this.avatarImg
        })
      },
    }
  };
</script>
<style lang="less" scoped>
  .avatar-upload-wrapper {
    height: 150px;
    width: 100%;
  }

  .lam-upload-preview {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 150px;
    height: 100%;
    max-height: 150px;
    border-radius: 50%;
    box-shadow: #82848a 0px 0px 4px;

    .upload-icon {
      position: absolute;
      top: 0;
      right: 10px;
      font-size: 1.4rem;
      padding: 0.5rem;
      background: rgba(222, 221, 221, 0.7);
      border-radius: 50%;
      border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .mask {
      opacity: 0;
      position: absolute;
      background: rgba(0, 0, 0, 0.4);
      cursor: pointer;
      transition: opacity 0.4s;

      &:hover {
        opacity: 1;
      }

      i {
        font-size: 2rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: -1rem;
        margin-top: -1rem;
        color: #d6d6d6;
      }
    }

    img,
    .mask {
      width: 100%;
      max-width: 150px;
      height: 150px;
      border-radius: 50%;
      overflow: hidden;
    }
  }
</style>
